<template>
    <div>
        <!-- 文件夹 -->
        <div class="folder-item" :class="{ active: isActive }" @click="toggleFolder">
            <div class="folder-item-content">
                <!-- 只有有子文件夹时才显示三角图标 -->
                <el-icon v-if="folder.children && folder.children.length > 0" class="folder-icon"
                    :class="{ 'rotate-90': isExpanded }">
                    <CaretRight />
                </el-icon>
                <el-icon class="folder-icon">
                    <Folder />
                </el-icon>
              <el-tooltip
                  effect="dark"
                  :content="folder.label"
                  placement="top-start"
              >
                <span>{{ folder.label }}</span>
              </el-tooltip>
            </div>
            <!-- 文件夹操作按钮 -->
            <div class="folder-actions" ref="folderActionsRef">
                  <span @click="toActionsHover">
                    <el-icon class="el-icon--right" color="#2d8cf0" style="transform: rotate(-90deg);"><MoreFilled /></el-icon>
                  </span>
              <div class="folder-actions-hover" v-show="isActionsHover">
                <p @click.stop="() => handleAddFolder(folder)">新建文件夹</p>
                <p @click.stop="() => handleEditFolder(folder)">编辑文件夹</p>
                <p @click.stop="() => handleDeleteFolder(folder)">删除文件夹</p>
              </div>
            </div>
        </div>

        <!-- 子文件夹 -->
        <div class="sub-folder-list" v-show="isExpanded">
            <FolderItem v-for="child in folder.children" :key="child.ID" :folder="child"
                :active-folder-id="activeFolderId" @select-folder="handleSelectFolder" @add-folder="handleAddFolder"
                @edit-folder="handleEditFolder" @delete-folder="handleDeleteFolder" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import {ref, computed, onMounted} from 'vue';
import { Folder, CaretRight, Plus, Edit, Delete } from '@element-plus/icons-vue';

const props = defineProps({
    folder: {
        type: Object,
        required: true,
    },
    activeFolderId: {
        type: Number,
        default: null,
    },
});

const emit = defineEmits(['select-folder', 'add-folder', 'edit-folder', 'delete-folder']);

const isExpanded = ref(false);

// 判断当前文件夹是否高亮
const isActive = computed(() => props.activeFolderId === props.folder.ID);

const toggleFolder = () => {
    // 只有有子文件夹时才切换展开状态
    if (props.folder.children && props.folder.children.length > 0) {
        isExpanded.value = !isExpanded.value;
    }
    emit('select-folder', props.folder);
};

const handleSelectFolder = (folder: any) => {
    emit('select-folder', folder);
};

const handleAddFolder = (folder: any) => {
    emit('add-folder', folder);  // 传递点击的文件夹
};

const handleEditFolder = (folder: any) => {
    emit('edit-folder', folder); // 传递点击的文件夹
};

const handleDeleteFolder = (folder: any) => {
    emit('delete-folder', folder); // 传递点击的文件夹
};
const isActionsHover = ref(false);
const folderActionsRef = ref(null);
const toActionsHover = () => {
  isActionsHover.value = !isActionsHover.value;
};
// 处理全局点击事件
const handleClickOutside = (event) => {
  // 检查点击的位置是否在 .folder-actions 容器内部
  if (folderActionsRef.value && !folderActionsRef.value.contains(event.target)) {
    isActionsHover.value = false; // 如果点击的是外部，则隐藏
  }
};
// 组件挂载时获取数据
onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

</script>

<style scoped>
.folder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    color: #4b5563;
    border-radius: 0.375rem;
    cursor: pointer;

    &:hover {
        background-color: #f3f4f6;
        .folder-actions {
            display: flex;
        }
    }
    &.active {
        background-color: #eff6ff;
        span {
          color: #3582fb;
        }
        i {
          color: #3582fb;
        }
    }

    .folder-item-content {
        display: flex;
        align-items: center;
        span {
          width: 250px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .folder-icon {
            margin-right: 0.2rem;
            transition: transform 0.2s;

            &.rotate-90 {
                transform: rotate(90deg);
            }
        }
    }
      .folder-actions-hover {
        background: #fff;
        min-width: 100px;
        line-height: 20px;
        z-index: 799;
        position: absolute;
        right: 0px;
        top: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        padding: 5px 0;
        p {
          padding: 0 15px;
          height: 28px;
          line-height: 28px;
            &:hover {
               background-color: #eff6ff;
               color: #3582fb;
             }
        }

      }
    .folder-actions {
      display: none;
        align-items: center;
        gap: 0.5rem;
        position: relative;
        .action-icon {
            cursor: pointer;
            color: #3b82f6;
            &:hover {
                color: #2563eb;
            }
        }
        .delete-icon {
            color: #ef4444;

            &:hover {
                color: #dc2626;
            }
        }
    }
}

.sub-folder-list {
    margin-left: 0.5rem;
}
</style>
